<span th:fragment="multiple_img">
    <div class="col-md-12 column">
        <input th:id="${_file_id}" name="files" type="file" multiple/>
    </div>
    <div th:id="${_file_id+'_list'}">
        <div class="img_div" th:each="img:${_file_list}">
            <img th:src="${img.fileUrl}" th:alt="${img.fileName}" class="rounded" style="height: 50px" th:onclick="[(${_file_id})]_manager.updateGroupType(this,[[${img.fileId}]],[[${img.fileUrl}]],[[${img.fileName}]])"/>
            <img th:onclick="[(${_file_id})]_manager.delete(this,[(${img.fileId})])" th:src="@{/img/delete.png}" alt="删除" class="images"/>
        </div>
    </div>
    <script th:inline="javascript">
      let [(${_file_id})]_manager = {
          imgListId:'[(${_img_list_id})]',
          carId:'',
          busType:'',
          //图片分组类型
          imgGroupType:'',
          init: function (_params) {
              // 多图上传
              $("#" + [[${_file_id}]]).fileinput({
                  uploadUrl: ctx + 'system/file/uploads',
                  uploadAsync: false,
                  showBrowse: true,
                  showPreview: false,
                  previewSettings: {
                      // image: {width:'100px',height:'100px'}
                  },
                  uploadExtraData: function (previewId, index) {
                      return _params;
                  }
              }).on('filebatchuploadsuccess', function (event, result, previewId, index) {
                  console.log(result)
                  var rsp = result.response;
                  if (rsp.code != 0) {
                      $.modal.alertError(rsp.msg)
                      return;
                  }
                  let {data=[]}=rsp;
                  data.forEach((item,index)=>{
                      let {fileId=-1,fileUrl='',fileName=''}=item;
                      [(${_file_id})]_manager.appendUploadImg(fileId,fileUrl,fileName);
                  });
              }).on('fileremoved', function (event, id, index) {
                  $("input[name='" + event.currentTarget.id + "']").val('')
              });
          },
          delete: function (_tag, id) {
              var url = ctx + 'system/file/remove';
              var data = {"ids": id};
              $.modal.confirm("确认要删除吗？", () => {
                  $.operate.post(url, data, function (data) {
                      [(${_file_id})]_manager.removeUploadImg(_tag);
                  });
              });
          },
          removeUploadImg:function (_tag) {
              $(_tag).parent().remove();
          },
          //初始化图片列表
          initImgList:function (_tag,_carId,_busType,_groupType) {
              this.carId=_carId;
              this.busType=_busType;
              this.imgGroupType=_groupType;
              console.log(_carId,_busType,_groupType);
              $('.car_item').removeClass('label-danger');
              $(_tag).addClass('label-danger');
              //加载图片
              let data={busId:this.carId,busType:this.busType,groupType:this.imgGroupType};
              let url=ctx + 'system/file/listByBusType';
              $.operate.post(url,data,function(result){
                  // console.log(result)
                  let {data = []} = result;
                  if (data.length > 0) {
                      $('#'+[(${_file_id})]_manager.imgListId).html('');
                      data.forEach((item, index) => {
                          let {fileId = -1, fileUrl = '', fileName = ''} = item;
                          [(${_file_id})]_manager.appendImgListItem(fileId, fileUrl, fileName);
                      });
                  }else{
                      $('#'+[(${_file_id})]_manager.imgListId).html('暂无图片');
                  }
              },false);
          },
          appendUploadImg:function(fileId,fileUrl,fileName){
              let _img_html = '<div class="img_div"><img src="' + fileUrl + '" alt="' + fileName + '" onclick="[(${_file_id})]_manager.updateGroupType(this,\''+fileId+'\',\''+fileUrl+'\',\''+fileName+'\')" class="rounded" style="height:50px"/>';
              _img_html += '<img onclick="[(${_file_id})]_manager.delete(this,\'' + fileId + '\')"  alt="删除" class="images" src="'+ctx+'img/delete.png'+'"/>';
              _img_html += '</div>';
              if (_img_html) {
                  $('#' + [[${_file_id+'_list'}]]).append(_img_html);
              }
          },
          appendImgListItem:function(fileId,fileUrl,fileName){
              let html='<li class="list-group-item">'+'<img class="img-rounded" src="'+fileUrl+'" alt="'+fileName+'" style="height:100px" onclick="[(${_file_id})]_manager.resetImgGroupType(this,\''+fileId+'\',\''+fileUrl+'\',\''+fileName+'\')"/>'+'</li>';
              $('#'+[(${_file_id})]_manager.imgListId).append(html);
          },
          resetImgGroupType:function (_tag,_fileId,fileUrl,fileName){
              console.log(_fileId)
              var url = ctx + 'system/file/editGroupType';
              let data={fileId:_fileId,groupType:'0'};
              $.operate.post(url,data,function(result){
                  [(${_file_id})]_manager.appendUploadImg(_fileId,fileUrl,fileName);
                  [(${_file_id})]_manager.removeUploadImg(_tag);
              });
          },
          //更新图片分组类型
          updateGroupType:function (_tag,_fileId,fileUrl,fileName) {
              console.log(_fileId);
              if (!this.imgGroupType){
                  $.modal.msgWarning('未选择选项');
                  return;
              }
              var url = ctx + 'system/file/editGroupType';
              let data={fileId:_fileId,groupType:this.imgGroupType};
              console.log(data);
              $.operate.post(url,data,function (result) {
                  console.log(result);
                  [(${_file_id})]_manager.removeUploadImg(_tag);
                  [(${_file_id})]_manager.appendImgListItem(_fileId,fileUrl,fileName);
              });
          }
      };
    </script>
<style>
    .img_div {
        display: inline-block;
        position: relative;
        margin: 5px 2px;
        z-index: 5;

        cursor: pointer;
        transition: all 0.6s;
    }

    .images {
        position: absolute;
        right: -2px;
        top: -2px;
        width: 18px;
        height: 18px;
    }
</style>
</span>
